@import './variables.scss';
@import  './element-variables';
#app {

  .main-container {
    min-height: 100%;
    overflow: hidden;
    // transition: margin-left .28s;
    // margin-left: $sideBarWidth;
    // width:calc(100% - #{$sideBarWidth});
    // width: calc(100% - $sideBarWidth);
    position: relative;
    &.horizontalMode{
      margin-left: 0;
      .el-menu--collapse{
        width: auto;
      }
    }
  }

  .sidebar-container {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    min-width: $sideBarWidth;
    background-color: $menuBg;
    // height: 100%;
    z-index: 8;
    overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 240px);
      }
      .el-scrollbar-nohashelp{
        height: calc(100% - 70px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 19px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }

    .el-menu {
      border: none;
      // height: 100%;
      width: 100% !important;
    }
  }

  .hideSidebar.showLeftMode {
    .sidebar-container {
      width: 54px !important;
      min-width: 54px !important;
    }
    .main-container {
      // margin-left: 54px;
      // 头部导航模式
      &.horizontalMode{
        margin-left: 0;
      }
    }

    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          // margin-left: 19px;
          margin-left: 15px;
          margin-right: 15px;
        }
      }
    }

    .el-submenu:not(.overflow-btn) {
      overflow: hidden;

      &>.el-submenu__title {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          // margin-left: 19px;
          margin-left: 15px;
          margin-right: 15px;
        }

        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }

    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            // height: 0;
            // width: 0;
            overflow: hidden;
            // visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }
  .fixedHeaderSidebar{
    .main-container {
      margin-left: 0px;
      // width:calc(100% - #{$sideBarWidth});
    }
  }
  .el-menu--collapse .el-menu .el-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .28s;
      width: $sideBarWidth !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// top水平导航模式》箭头样式
.el-menu--horizontal> .isHorizontal .el-submenu .el-submenu__icon-arrow{
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}
.overflow-btn{
  // 导航超出 三个点（去箭头）
  >.el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
  .el-menu--popup .menu-wrapper{
    float: none;
  }
  .el-menu-item.is-active{
    border-bottom: 0!important;
  }
}
// 水平导航去掉底部border
.el-menu.el-menu--horizontal{
  border-bottom: 0 !important;
}



  // 左侧导航hover样式:去除hover后的背景色
.submenu-title-noDropdown,.el-menu-item,.el-submenu.is-active .el-submenu__title,
.el-submenu__title {
  &:hover {
    background-color: transparent !important;
  }
}
// 左边导航
.el-menu-vertical{
  &.black{
    .el-submenu.is-opened {
      .el-menu .el-submenu__title,.el-menu .el-menu-item:not(.is-active){
        background-color:rgba(0,0,0,0.2)!important;
      }
    }
  }
  &.white{
    .el-menu .el-submenu__title,.el-menu .el-menu-item:not(.is-active){
      background-color:rgba(0,0,0,0.02)!important;
    }
  }
 .el-menu-item,.el-submenu__title{
    display: flex;
    align-items: center;
    span{
      white-space: pre-line;
      line-height: normal;
    }
  }
  .el-submenu__title{
    span{
      margin-right: 14px;
    }
  }
}
.el-menu-item.is-active.submenu-title-noDropdown{
  pointer-events:none;
  cursor: pointer;
}

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }
    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }

  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    &:hover {
      background-color: transparent !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}
// 修改侧边栏-每一条高度
.el-menu-vertical{
  a{
    display: block !important;
  }
  // .el-submenu__title,.el-menu-item,.el-submenu .el-menu-item{
  //   height: $sideBarItemHeight;
  //   line-height: $sideBarItemHeight;
  // }
}
// 头部导航-高度修改
.el-menu--horizontal{
  .el-menu-item,.el-submenu__title{
    height: $topHeigth !important;
    line-height:  $topHeigth !important;
  }
  .el-menu--popup{
    .el-menu-item,.el-submenu__title{
      height: $topPopupItemHeight !important;
      line-height:  $topPopupItemHeight !important;
    }
  }
  .el-submenu .el-menu-item,.el-menu--popup{
    min-width: 168px 
  }
  & > .isHorizontal .el-menu--popup .el-submenu .el-submenu__icon-arrow{
    margin-top: -6px;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-left: 0;
  }
  // & > .isHorizontal > .el-submenu.is-active > .el-submenu__title{
  //   padding: 0;
  //   margin: 0 20px;
  // }
  // .el-menu .el-submenu__title{
  //   padding: 0 16px 0 12px !important;
  // }
} 
.sub-el-icon{
  font-size: 16px !important;
}
// .el-submenu [class^=el-icon-]{
//   font-size: 16px !important;
//   width: 16px !important;
// }
// // .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title
//   .el-menu .el-submenu__title{
//     padding: 0 16px !important;
//   }
// 导航适配移动端
@media only screen and (max-width: $screen-lg) {
  .username{
    display: none;
  }
  .dt-header{
    .app-breadcrumb.el-breadcrumb{
      display: none;
    }
    .right-menu{
      .styleBtn{
        display: none;
      }
    }
  }
  .main-container{
    padding-left: 0px !important;
  }
  .tags-view-container{
    left: 0 !important;
  }
  .sidebar-logo-container{
    left: 0;
    position: absolute !important;
    z-index: 1;
  }
  .dt-main-collapse .sidebar-logo-container{
    left: -208px;
  }
}

@media only screen and (max-width: $screen-md) {
  .right-menu{
    #header-search,.notice{
      display: none;
    }
    .notify{
      display: block;
    }
  }
}
